<!DOCTYPE html>
<html lang="en">
    <!--当前页面的设置与配置-->
    <head>
        <!--标题标签-->
        <title>高德地图导航定位</title>
        <!--解析字符编码-->
        <meta charset="UTF-8" />
        <!--媒体识别：自动响应移动端-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--第二步：内联样式-->
        <style rel="stylesheet" type="text/css">
            /*去除正文body自带的内外间距：全屏*/
            body { margin:0; padding:0; }
            /*地图容器的大小*/
            #container { width:100%; height:100vh; }
        </style>
    </head>
    <!--页面正文-->
    <body>
        <!--
            前提：
                高德开放平台：https://lbs.amap.com/
                注册账号，设置应用，配置应用信息，得到key和security
                我们的html是通过js接口实现地图的
                开发手册：https://lbs.amap.com/api/javascript-api-v2/summary
                ArkWeb方式：可以绕过鸿蒙系统，通过html整合高德地图，不受语言和版本的影响
                key：	  e4fe7e7b7f2745f7bc1c74728adf2bf3
                security：a4693c4b60585a4892501f9b321b204f
        -->

        <!--第一步：定义呈现地图的容器-->
        <div id="container"></div>

        <!--第三步：设置全局变量-->
        <script type="text/javascript">
            //将“安全密钥”设置到全局中，后面很多地图操作，默认都会自动去调用的
            //代码是固定的，不能修改
            //这里在当前window对象中，挂载了一个配置
            window._AMapSecurityConfig = {
                securityJsCode: 'a4693c4b60585a4892501f9b321b204f'
            }
        </script>

        <!--第四步：加载官方离线脚本，附加申请的key-->
        <script
          type="text/javascript"
          src="https://webapi.amap.com/maps?v=2.0&key=e4fe7e7b7f2745f7bc1c74728adf2bf3"
        ></script>

        <!--第五步：自定义脚本开发-->
        <script type="text/javascript">

            //创建地图对象，初始化绑定('绑定的容器', {配置})
            var map = new AMap.Map(
                'container',                        //加载地图的网页元素的id
                {
                    zoom: 25,                       //初始地图的缩放比例
                    center: [121.475087, 31.237295] //初始地图的中心点[经度, 维度]
                }
            )

            //当页面正式加载完毕后
            window.onload = function() {
                //调用鸿蒙代理操作，获取且设置当前设备的经纬度
                window.swift.setCurrentLocation()
            }

            //设置地图定位中心点(经度, 维度)
            function setLocation(lng, lat) {

                //重新设置地图的中心点
                map.setZoomAndCenter(25, [lng, lat])

                //创建一个标记点，加入到地图中
                map.add(new AMap.Marker({
                    map,                  //对应的地图对象
                    position: [lng, lat], //标记点
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
                }))

                //为地图新增插件能力：搜索
                map.plugin(['AMap.PlaceSearch'], function(){
                    //创建搜索功能对象，提供所有设置
                    var MSearch = new AMap.PlaceSearch({
                        map,                //参照的地图对象
                        pageSize: 4,        //每页多少条
                        pageIndex: 1,       //当前第几页
                        extensions: 'base'  //结果-只要基本信息
                    })

                    //搜索之前，先为地图，设置监听
                    //监听：当搜索功能完成时(采用的是js的事件机制)
                    AMap.Event.addListener(MSearch, 'complete', (res)=>{
                        //调用鸿蒙应用方法，将搜索结果传回
                        window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    })

                    //正式执行搜索
                    MSearch.searchNearBy('停车场', [lng, lat])
                })

            }

        </script>
    </body>
</html>